<template>
    <div>
        <div id="maychar1"></div>
        <div id="maychar2"></div>
    </div>
</template>

<script lang="js">
import { defineComponent, onMounted, inject, toRefs, watch } from "vue"; // 主要
export default defineComponent({
  props: {
        echartsData:{
            type: Object,
            default: () => ({})
        },
        echartsWarnData:{
            type: Object,
            default: () => ({})
        },
    },
  setup(props,context) {
    const { echartsData } = toRefs(props);
    const { echartsWarnData } = toRefs(props);

    let echarts = inject("echarts"); // 主要

    watch(()=>echartsData,(newValue,oldValue) => {
      changetype1();
    },{deep:true});

    watch(()=>echartsWarnData,(newValue,oldValue) => {
      changetype2();
    },{deep:true});

    // 柱状图
    let machart1;
    let option1;
    const changetype1 = () => {
      // 获取组件实例
      if (machart1 != null && machart1 != "" && machart1 != undefined){
        machart1.dispose();
      }
      machart1 = echarts.init(document.getElementById("maychar1"), null, {width:580,height:360});
      // 设置配置项
      option1 = {
        tooltip: {
          // trigger: 'axis',
          trigger: 'item',
        },
        grid: {
          // top:100,
          left: 280,
          right:200
        },
        legend: echartsData.value.legendData,
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            name: '年度月份',
            data: echartsData.value.xAxisData
          }
        ],
        yAxis: [
          {
            name: '金额',
            type: 'value'
          }
        ],
        series: echartsData.value.seriesData
      };
      // 赋值
      machart1.setOption(option1,{
        notMerge: true, //不和之前的option合并
      });
      // legend点击事件
      machart1.on('legendselectchanged', function(params) {
        let { name, selected } = params;
        if(name == '用于定向支出的收入项目') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['用于定向支出的收入项目'] = true;
            option1.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
            option1.legend['selected']['    再融资债券(转贷)收入'] = false;
          }else {
            option1.legend['selected']['用于定向支出的收入项目'] = false;
          }
        }
        if(name == '    其中:新增专项债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['    其中:新增专项债券(转贷)收入'] = true;
            option1.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option1.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
          }
        }
        if(name == '    再融资债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['    再融资债券(转贷)收入'] = true;
            option1.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option1.legend['selected']['    再融资债券(转贷)收入'] = false;
          }
        }

        if(name == '三保支出预算数') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['三保支出预算数'] = true;
            option1.legend['selected']['    其中：三保支出（除工资）'] = false;
            option1.legend['selected']['    其中：工资支出预算数'] = false;
          }else {
            option1.legend['selected']['三保支出预算数'] = false;
          }
        }
        if(name == '    其中：三保支出（除工资）') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['    其中：三保支出（除工资）'] = true;
            option1.legend['selected']['三保支出预算数'] = false;
          }else {
            option1.legend['selected']['    其中：三保支出（除工资）'] = false;
          }
        }
        if(name == '    其中：工资支出预算数') {
          let flag = selected[name];
          if(flag) {
            option1.legend['selected']['    其中：工资支出预算数'] = true;
            option1.legend['selected']['三保支出预算数'] = false;
          }else {
            option1.legend['selected']['    其中：工资支出预算数'] = false;
          }
        }
      })
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart1.resize();
      });
    };

    // 柱状图
    let machart2;
    let option2;
    const changetype2 = () => {
      // 获取组件实例
      if (machart2 != null && machart2 != "" && machart2 != undefined){
        machart2.dispose();
      }
      machart2 = echarts.init(document.getElementById("maychar2"), null, {width:360,height:360});
      // 设置配置项
      option2 = {
        // title: {
        //   // text: '库款差额',
        //   subtext: '库款差额',
        //   left: 'center',
        // },        
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top:100,
          left: 60,
          right:68
        },
        // legend: [],
        xAxis: [
          {
            type: 'category',
            name: '预警等级',
            data: echartsWarnData.value.xAxisData
          }
        ],
        yAxis: [
          {
            name: '金额（库款差额）',
            type: 'value'
          }
        ],
        series: [
            {
                type: 'bar',
                itemStyle: {
                    //这里设置每个柱子颜色不一样
                    color: function(params) {
                        // 定义一个颜色数组colorList
                        let colorList = echartsWarnData.value.seriesColor;
                        return colorList[params.dataIndex]
                    },
                },
                data: echartsWarnData.value.seriesData,
            }
        ]
      };
      // 赋值
      machart2.setOption(option2,{
        notMerge: true, //不和之前的option合并
      });
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart2.resize();
      });
    };

    onMounted(() => {
      changetype1();
      changetype2();
    });

    return {};
  },
});
</script>

<style lang="less" scoped></style>
